import React, { useEffect, useState } from 'react';
import * as echarts from 'echarts'
import service from '../api'

function EchartThree(props) {
    var [xAxis, setXAxis] = useState([])
    var [seriesData, setSeriesData] = useState([])
    var myChartThree = null
    

    var requestdata = async () => {
        var res = await service.data.user_simpleData()
        var xAxis = res.data.data.map((item) => item.x)
        var seriesData = res.data.data.map((item) => item.val)
        setXAxis(xAxis)
        setSeriesData(seriesData)
        myChartThree.setOption({
            title: {
                text: '注册用户量（周）',
                left: 'center',
                top: 20
            },
            legend: {
                left: 10,
                top: 20,
            },
            tooltip: { triggerOn: "mousemove", },
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '注册量',
                    data: seriesData,
                    type: 'line',
                  
                }

            ]

        })
    }
    useEffect(() => {
        requestdata()
        myChartThree = echarts.init(document.getElementById('echartthree') || document.body);
        myChartThree.setOption({
            title: {
                text: '嗨购日注册用户量',
                left: 'center',
                top: 20
            },
            legend: {
                left: 10,
                top: 20,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#7991d1'
                  }
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
            xAxis: {
                data: xAxis,
                type: 'category',
                boundaryGap: false,
            },
            yAxis: {},
            series: [
                {
                    name: '注册量',
                    data: seriesData,
                    type: 'line',
                    areaStyle: {},
                }

            ]

        })
       
    }, [])
    return (
        <div className='echartthree-box'>
            <div id="echartthree" style={{ height: 500, width: 700, marginBottom: 50 }}></div>
        </div>
    );
}

export default EchartThree;